import Taro, { Component } from '@tarojs/taro'
import { View, Button, Text } from '@tarojs/components'
import { connect } from '@tarojs/redux'
import Square from './square'
import './index.scss'

class Index extends Component {

    config = {
        navigationBarTitleText: '首页'
    }

    constructor(props) {
        super(props)
        let sqList = new Array(15)
        for (let i = 0; i < 15; i++) {
            let item = new Array(15).fill(null)
            sqList[i] = item
        }

        this.state = {
            squareList: sqList,
            isX: true
        }
    }

    handleClick(x, y) {
        console.log(x + "____" + y);

        let squareList1 = this.state.squareList.concat()
        if (squareList1[x][y] != null) {
            return false
        }
        squareList1[x][y] = this.state.isX ? 'x' : '0'
        this.setState({
            isX: !this.state.isX
        })
        this.setState({
            squareList: squareList1
        })

        if (this.winning(x, y, squareList1[x][y])) {
            if (squareList1[x][y] == 'x') {
                alert('黑棋赢了')
            } else {
                alert('白棋赢了')
            }
            location.reload()
        }
    }

    winning(x, y, name) {
        let data = this.state.squareList;
        // 旗子的方向，x代表x轴方向前进，y代表y方向前进
        let direction = [
            {
                x: -1,
                y: 0
            },
            {
                x: -1,
                y: 1
            },
            {
                x: 0,
                y: 1
            },
            {
                x: 1,
                y: 1
            },
        ]
        let win = false
        // 遍历四个方向，如果没有相同的棋子则反方向查找
        direction.forEach((item) => {
            let dirX = item.x
            let dirY = item.y
            // 连续的相同棋子数
            let num = 1
            // x轴方向前进步数
            let xStep = 1
            // y方向前进步数
            let yStep = 1
            // 是否反方向遍历过
            let flag = true

            while (num <= 5) {
                // 判断是否超出边界、是否为相同的棋子，如果是，继续遍历，如果不是而且之前为反方向查找过，则反方向查找，否则跳出循环
                if (x + dirX * xStep >= 0 &&
                    x + dirX * xStep <= 14 &&
                    y + dirX * yStep >= 0 &&
                    y + dirX * yStep <= 14 &&
                    data[x + dirX * xStep][y + dirY * yStep] === name) {
                    num++
                    xStep++
                    yStep++
                    if (num == 5) {
                        win = true
                    }
                } else {
                    if (flag) {
                        dirX = -dirX
                        dirY = -dirY
                        xStep = 1
                        yStep = 1
                        flag = !flag
                    } else {
                        break
                    }
                }
            }
        });
        
        return win
    }

    render() {
        return (
            <View className='index'>{
                this.state.squareList.map((xItem, x) => {
                    return (<div class='row' key={x}>
                        {xItem.map((Yitem, y) => {
                            return <Square onClick={() => this.handleClick(x, y)} value={Yitem} key={y}></Square>
                        })}
                    </div>)
                })}
            </View>
        )
    }
}

export default Index
